<script setup lang="ts">
import { ref } from "vue";

import {
  ElRadioGroup,
  ElRadio,
} from "element-plus";

const props = defineProps({
  item:  {
    type: Object,
    default: () => {},
  },
  index: {
    type: Number,
    default: 0
  },
   //是否显示参考解析
  showCorrect: {
    type: Boolean,
    default: false
  },
  collectShow: { //是否显示收藏
    type: Boolean,
    default: false
  },
   collectIdList: {
    type: Array as any,
    default: () => []
  }
})

const emits = defineEmits(['change', 'addCollect']);

function change(value: any) {
  emits('change', value)
}
function shuffleArray(array: []) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const options = shuffleArray(props.item.item) as any

</script>


<template>
  <div v-if="item.question_style === 1" class="margin-b-15">
      <p class="title">
        {{ index+1 }}.{{item.title}}
        <img :src="item.title_thumb" />
        （{{item.fraction}}分）
        <span v-if="showCorrect">
          <span v-if="item.correct_item.startsWith('http')"><img :src="item.correct_item" /></span>
          <span v-else>({{ item.correct_item }})</span>
        </span>
        <span v-if="collectShow" :class="['collect-icon', collectIdList.includes(item.question_id) ? 'red' : '']" title="收藏" @click="emits('addCollect', item.question_id)">✿</span>
      </p>
      <el-radio-group v-model="item.val" @change="change">
        <el-radio v-for="(o, i) in options" :value="o.value">
          
          <img v-if="o.img" :src="o.img" />
          <span v-else>{{o.value}}</span>
        </el-radio>
      </el-radio-group>
      
      <span v-if="item.error" class="red"> 回答错误</span>
    </div>
</template>
